<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/sasspublic.css">
    <link rel="stylesheet" href="../css/public.css">
    <style>
        .cont{width:1000px;overflow: hidden;margin: 30px auto;border: solid 1px black;}
        .cont .goods{width: 250px;float: left;border: solid 1px black;box-sizing: border-box;text-align: center;padding: 10px;}
        .goods a div{width: 182.39px; height: 182.39px;}
        .goods img{width: 80%;}
        .goods span{display: block;margin: 10px 0; color: red;font-weight: bold;}
        .goods p{margin: 0;height: 40px;line-height: 20px;overflow: hidden;}
        .goods input{display: block;padding: 20px;margin: 0 auto;font-size: 20px;}
        footer{display: flex;height: 30px;width: 100%;justify-content: center;align-items:center ;}
        footer span{border: 1px solid black; border-radius: 5px;padding: 10px 10px;}
        footer ul{display: flex;}
        footer li{width: 20px;height: 20px;border: 1px solid black;border-radius: 4px;text-align: center;margin: 0 10px;}
    </style>
</head>
<body>
    <div id="header">
        <div id="nav">
            <div id="left">
                <a href="../index.html">Hi,欢迎来到ht的洋码头！</a>
                <a href="">我是买手</a>
            </div>
            <div id="loginbar">
                <ul>
                    <li><a href="./pages/login.html">登录</a></li>
                    <li><a href="./pages/logon.html">注册</a></li>
                    <li><a class="cart">购物车</a></li>
                    <li><a href="">我的订单</a></li>
                    <li><a href="">个人中心</a></li>
                    <li><a href="">规则&公告</a></li>
                </ul>
            </div>
        </div>
        <div id="content">
            <div id="logo"><a href="./index.html"></a></div>
            <form id="search">
                <input type="text" placeholder="搜索你想要的商品">
                <div id="searchbtn"></div>
            </form>
            <div id="QR">
                <img id="qrimg" abc="../static/QR.png" alt="">
            </div>
        </div>
        <div class="nav clearfix">
            <ul>
                <li>首页</li>
                <li>今日限时抢</li>
                <li>洋货集</li>
                <li class="tab">分类 <span></span></li>
            </ul>
        </div>
        <!-- 二级导航 关联上面的 "分类"-->
        <div class="secondBar">
            <ul>
                <li class="nav1">分类 <span></span></li>
                <li class="sbar clearfix">
                </li>
            </ul>
        </div>
    </div>
    <div class="cont">
    </div>
    <footer>
        <span id="prev">上一页</span>
        <ul id="pageList"></ul>
        <span id="next">下一页</span>
    </footer>
    <div id="last">
        <div id="details">
            <img abc="../static/details.png" alt="">
        </div>
        <div id="more">
            <div id="total">
                <ul>
                    <li>购物指南</li>
                    <li>订单服务</li>
                    <li>支付与配送</li>
                    <li>售后服务</li>
                    <li>官方微信</li>
                </ul>
            </div>
            <div id="tomore">
                <ul>
                    <li>注册与登录</li>
                    <li>账户信息维护</li>
                    <li>购物流程</li>
                    <li>会员体系</li>
                    <li>常见问题</li>
                </ul>
                <ul>
                    <li>订单状态说明</li>
                    <li>自动取消顶大</li>
                    <li>上传身份证</li>
                    <li>&nbsp; </li>
                    <li>&nbsp; </li>
                </ul>
                <ul>
                    <li>支付方式</li>
                    <li>优惠劵和红包</li>
                    <li>如何提现</li>
                    <li>配送方式</li>
                    <li>&nbsp; </li>
                </ul>
                <ul>
                    <li>消费维权</li>
                    <li>纠纷处理规则</li>
                    <li>退货规则</li>
                    <li>&nbsp; </li>
                    <li>&nbsp; </li>
                </ul>
                <div>
                    <img id="qrvx" abc="../static/QRvx.png" alt="">
                </div>
            </div>
        </div>
        <div id="about">
            <p>关于码头</p><span>|</span>
            <p>码头招聘</p><span>|</span>
            <p>网站地图</p><span>|</span>
            <p>所有帮助</p><span>|</span>
            <p>海外招商中心</p><span>|</span>
            <p>扫货买手规则</p><span>|</span>
            <p>卖家常见问题</p>
        </div>
        <div id="link">
            <p>55bbs我爱购物网</p><span>|</span><p>篱笆网</p><span>|</span><p>闺蜜网</p><span>|</span>
            <p>名品导购网</p><span>|</span><p>瑞丽女性网</p><span>|</span><p>起点中文网</p><span>|</span>
            <p>酷6网</p><span>|</span><p>太平洋返利网</p><span>|</span><p>海外折扣拼团网</p><span>|</span>
            <p>韩都衣舍</p><span>|</span><p>嘉年乐</p><span>|</span><p>为为网购商城</p><span>|</span><br>
            <p>同城购物网</p><span>|</span><p>齐家网</p><span>|</span><p>网上商城</p><span>|</span>
            <p>礼品公司</p><span>|</span><p>留学服务中心</p><span>|</span>
            <p>礼派</p><span>|</span><p>快易拍</p><span>|</span>
            <p>手表</p><span>|</span><p>卡当创意礼物</p><span>|</span><p>户外装备</p><span>|</span>
            <p>母婴展</p><span>|</span><p>微财富理财</p><span>|</span><p>更多>></p>
        </div>
        <div id="auth">
            <div id="imgbox"></div>
            <div>
                <span>© 2009－2019 ymatou.com, All rights reserved 增值电信业务经营许可证：沪B2-20140021</span><br>
                <p>上海洋码头网络技术有限公司  版权所有 备案号（ 沪ICP备11050082号 ）</p><br>
                <span>上海市静安区江场三路93号13层</span>
            </div>
            <div id="footer">
                <div id="business"></div>
                <div id="footerf">
                    <p>沪公网安备 31010802001410号</p><span>|</span> 
                    <span>违法不良信息举报电话：021-80185223</span><span>|</span>
                    <p>上海市互联网上海市互联网举报中心</p><br><br>
                </div>
            </div>
        </div>
    </div>
    <div id="sidebar">
        <ul>
            <li><div id="personal"></div></li>
            <li class="cart"><div id="mycart"></div><span><p>购物车</p> </span></li>
            <li class="sqr" style="height:60px"><div id="qrsmall"></div></li>
            <li><div id="top"></div><a href="#header">&nbsp;&nbsp;TOP</a></li>
        </ul>
    </div>
    <div id="ycqr">
        <div id="xfqr"><img abc="../static/QRvx.png" alt=""></div>
    </div>
</body>
<script src="../js/ajax-promise.js"></script>
<script src="../js/public.js"></script>
<script>
    // 楼层上的二维码
    class QR{
        constructor(){
            this.sqr=document.querySelector(".sqr");
            this.ycqr=document.querySelector("#ycqr");
            this.addEvent();            
        }
        addEvent(){
            var that=this;
            this.sqr.onmousemove=function(){
                that.ycqr.style.display = "block";
            }
            this.sqr.onmouseout=function(){
                that.ycqr.style.display = "none";
            }
            this.ycqr.onmousemove=function(){
                that.ycqr.style.display = "block";
            }
            this.ycqr.onmouseout=function(){
                that.ycqr.style.display = "none";
            }
        }
    }
    new QR;
    // 选项卡
    class Tab{
        constructor(){
            this.tab=document.querySelector(".tab");
            this.secondBar=document.querySelector(".secondBar");
            this.nav1=document.querySelector(".nav1");
            this.sbar=document.querySelector(".sbar");
            this.url="http://localhost/ht/yangmatou/src/json/tab.json"
            this.load();
            this.sbar1=document.querySelector(".sbar1");
            this.addEvent();
        }
        addEvent(){
            var that=this;
            that.sbar.onclick=function(){
                location.href="./goodsList.html";
            }
            this.tab.onmouseover=function(){
                that.secondBar.style.display = "block";
            }
            that.tab.onmouseout=function(eve){
                that.secondBar.style.display = "none";
            }
            this.nav1.onmouseover=function(){
                that.secondBar.style.display = "block";
            }
            that.nav1.onmouseout=function(eve){
                that.secondBar.style.display = "none";
            }
            this.sbar.onmouseover=function(){
                that.secondBar.style.display = "block";
            }
            that.sbar.onmouseout=function(eve){
                that.secondBar.style.display = "none";
            }
        }
        load(){
            ajax({
                url:this.url
            }).then((res)=>{
                this.res = JSON.parse(res);
                this.display();
            })
        }
        display(){
            for(var i=0;i<14;i++){
                this.sbar.innerHTML+=`<div class="sbar1">
                        <div class="left"><p>${this.res[i].sorc}<span></span></p><i>${this.res[i].sorcs}</i></div>
                        <div class="right"><img src="${this.res[i].img}" alt=""></div>
                    </div>`;
            }
            this.sbar.innerHTML+=`<div id="sbarlast">
                        <div class="left"><p>更多<span></span></p><i>More</i></div>
                    </div>`;
        }
    }
    // 运行选项卡
    new Tab;
    // 渲染页面
    class List{
        constructor(){
            this.url="http://localhost/ht/yangmatou/src/json/goods.json"
            this.ind=parseInt(0) ;
            this.cont=document.querySelector(".cont");
            this.load();
        }
        load(){
            ajax({
                url:this.url
            }).then((res)=>{
                this.res = JSON.parse(res);
                this.display();
            })
        }
        display(){
            let str = "";
            for(var i=0;i<this.res.length;i++){
                str += `<div class="goods" index="${this.res[i].goodsId}">
                            <a href="detal.html?id=${this.res[i].goodsId}">
                                <div><img abc="${this.res[i].img.largeImg[0]}" alt=""></div>
                                <p>${this.res[i].name}</p>
                                <span>${this.res[i].price}</span>
                            </a>
                        </div>`;
                this.ind+=1;
            }
            this.cont.innerHTML = str;
            new Page({
                length:this.res.length,
                data:this.res,
                num:20,
                prev:document.getElementById("prev"),
                next:document.getElementById("next"),
                pageList:document.getElementById("pageList"),
                ind:0,
                cont:this.cont
            });
        }
        lanjz(){
            var imgs=document.querySelectorAll("img");
            var arr=Array.from(imgs);
            var clientH=document.documentElement.clientHeight;
            onscroll=function(){
                var scrollT=document.documentElement.scrollTop;
                for(var i=0;i<arr.length;i++){
                    if((arr[i].offsetTop + 200) < (clientH +scrollT)){
                        arr[i].src=arr[i].getAttribute("abc");
                        // console.log(arr[i]);
                        // arr.splice(i,1);
                        // i--;
                    }
                }
            }
        }
    }
    new List();
    // 验证是否进入购物车
    new IfLogin({
        url1:"myCart.html",
        url2:"login.html",
        add:document.querySelectorAll(".cart")
    });
    // 分页
    class Page{
        constructor(ops){
            this.length = ops.length;
            this.num = ops.num || 2;
            this.prev = ops.prev;
            this.next = ops.next;
            this.pageList = ops.pageList;
            this.ind = ops.ind || 0;
            this.data = ops.data;
            this.cont = ops.cont;
            this.createPage();
            this.addEvent();
            this.display();
        }
        createPage(){
            this.max = Math.ceil(this.length/this.num);
            let str = "";
            for(let i=0;i<this.max;i++){
                str += `<li>${i+1}</li>`;
            }
            this.pageList.innerHTML = str;
            this.li = this.pageList.children;
            this.setActive();
        }
        setActive(){
            for(let i=0;i<this.li.length;i++){
                this.li[i].style.background = "";
            }
            this.li[this.ind].style.background = "red";
        }
        addEvent(){
            var that = this;
            this.prev.onclick = function(){
                if(that.ind == 0){
                    that.ind = 0;
                }else{
                    that.ind--;
                }
                that.setActive();
                that.display();
            }
            this.next.onclick = function(){
                if(that.ind == that.max-1){
                    that.ind = that.max-1;
                }else{
                    that.ind++;
                }
                that.setActive();
                that.display();
            }

        }
        display(){
            var str = "";
            for(var i=this.ind*this.num; i<(this.ind+1)*this.num; i++){
                if(i<this.data.length){
                    str += `<div class="goods" index="${this.data[i].goodsId}">
                        <a href="detal.html?id=${this.data[i].goodsId}">
                            <div><img abc="${this.data[i].img.largeImg[0]}" alt=""></div>
                            <p>${this.data[i].name}</p>
                            <span>${this.data [i].price}</span>
                        </a>
                    </div>`;
                }
            }
            this.cont.innerHTML = str;
            this.lanjz();
        }
        lanjz(){
            var imgs=document.querySelectorAll("img");
            var clientH=document.documentElement.clientHeight;
            var scrollT=document.documentElement.scrollTop;
            for(var i=0;i<imgs.length;i++){
                if(imgs[i].offsetTop<clientH+scrollT){
                    imgs[i].src=imgs[i].getAttribute("abc");
                }
            }
            onscroll=function(){
                var scrollT=document.documentElement.scrollTop;
                for(var i=0;i<imgs.length;i++){
                    if((imgs[i].offsetTop + 200) < (clientH +scrollT)){
                        imgs[i].src=imgs[i].getAttribute("abc");
                    }
                }
            }
        }
    }
    
    
</script>
</html>